<template>
  <div class="app">
    <!-- 
      插值表达式的合法用法有：
      1. 变量
      2. 字符串拼接
      3. 数值运算
      4. 三元表达式 注意：不能改写成if else语句
      5. 函数
    -->
    {{ msg }}
    {{ "🤳" + msg }}
    {{ age + 1 }}
    {{ age >= 18 ? "已成年" : "未成年" }}
    {{ msg.split("").reverse() }}

    <hr />

    <div v-text="msg"></div>
    <div v-text="'🎁' + msg"></div>
    <div v-text="age + 1"></div>
    <div v-text="age >= 18 ? '已成年' : '未成年'"></div>
    <div v-text="msg.split('').reverse()"></div>

    <hr />
    <!-- 对于带html标签的字符串，我们使用v-html指令，注意它的安全性问题 -->
    <div v-html="htmlStr"></div>

    <hr />
    <!-- v-bind 动态绑定属性 语法规则 v-bind:属性名="值" -->
    <a v-bind:href="url">{{ urlname }}</a>
    <!-- 常用简写形式 :属性名="值" -->
    <a :href="url">{{ urlname }}</a>
    <!-- v-bind中字符串拼接可以使用 + 或者 es6的模板字符串 -->
    <p><a :href="'/detail/' + id">javascript是世界上最好的语言</a></p>
    <p><a :href="`/detail/${id}`">javascript是世界上最好的语言</a></p>
    <!-- 
      v-bind动态绑定class
      对象语法 :class="{类名: 布尔值}"   如果布尔值为true，表示具有该类名，如果为false，就不具有该类名
      数组语法1： :class="[类名1, 类名2]"
      数组语法2： :class="[类名1, {类名2: 布尔值}]"
    -->
    <nav>
      <span :class="{ active: isActive }">首页</span>
      <span :class="['active', 'bold']">我的音乐</span>
      <span :class="['active', { bold: false }]">朋友</span>
    </nav>

    <!-- 
      v-bind动态绑定style 
      对象语法： :style="{属性名: 属性值}" 注意属性名需要改写成驼峰命名法
      数组语法： 
    -->
    <p :style="{ color: 'blue', fontSize: '18px' }">hello</p>
    <p :style="[styleObj1, styleObj2]">world</p>

    <hr />

    <button v-on:click="change">点击改变isActive</button>
    <!-- 简写： @事件类型="处理函数" 处理函数中可以直接传递参数 传递事件对象通过$event，注意不能加引号-->
    <button @click="changeUrl('http://www.taobao.com', '淘宝', $event)">
      点击
    </button>
    <button @click="changeUrl('http://www.jd.com', '京东', $event)">
      点击
    </button>

    <!-- 
      事件修饰符 
      .prevent表示阻止默认行为
      .stop表示阻止冒泡
    -->
    <a href="http://www.jd.com" @click.prevent="print">京东</a>

    <!-- 
      按键修饰符
      .enter表示按的是回车键
    -->
    <input type="text" @keyup.enter="login" />

    
    <div class="house" :class="{open: isOpen, close: !isOpen}">
      <button @click="switchOpen">开关</button>
    </div>

  </div>
</template>

<script>
export default {
  // 保存hello world这个字符串，通过data函数中return的对象来保存
  data() {
    return {
      msg: "hello world!😊",
      age: 18,
      htmlStr: "<h2>我是一个小标题</h2>",
      url: "http://www.baidu.com",
      urlname: "百度",
      id: 111,
      isActive: false,
      styleObj1: { color: "blue" },
      styleObj2: { textDecoration: "underline" },
      isOpen: true
    };
  },
  // methods中放函数
  methods: {
    change() {
      // this代表的是组件的实例对象。也就是这个App.vue最后生成的对象
      this.isActive = !this.isActive;
    },
    changeUrl(url, urlname, e) {
      this.url = url;
      this.urlname = urlname;
      console.log(e);
    },
    print() {
      console.log("京东");
    },
    login() {
      console.log("我去登录了");
    },
    switchOpen() {
      console.log('点击了开关');
      this.isOpen = !this.isOpen;
    }
  },
};
</script>


<style>
.app {
  font-size: 30px;
  color: gray;
  text-align: center;
  margin-top: 60px;
}
.active {
  background-color: rgb(16, 164, 194);
}
.bold {
  font-size: 33px;
  font-weight: bold;
}
.house {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
.open {
  background-color: yellow;
}
.close {
  background-color: black;
}
</style>
